<template>
	<view class="container">
		<!-- 主要内容 -->
		<view class="info-card">
			<image class="success-icon" src="../../../static/sourceofgoods/duigo.png"></image>
			<view class="success-message">货源已发布成功</view>

			<view class="info-list">
				<view class="info-item">
					<text class="label">货源编号</text>
					<text class="value">209572903572309582309</text>
				</view>

				<view class="info-item">
					<text class="label">货物名称</text>
					<text class="value">中硫5400</text>
				</view>

				<view class="info-item">
					<text class="label">发布运量</text>
					<text class="value">1000.00 吨</text>
				</view>

				<view class="info-item">
					<text class="label">司机服务费率</text>
					<text class="value">30.00 %</text>
				</view>

				<view class="info-item">
					<text class="label">油费</text>
					<text class="value">200.00 元/车</text>
				</view>

				<view class="info-item">
					<text class="label">信息费</text>
					<text class="value">33.00 元/车</text>
				</view>

				<view class="info-item">
					<text class="label">亏吨扣费</text>
					<text class="value">卸车净重小于装车净重0.2吨以内免扣吨费，每少0.1吨，扣10.00元</text>
				</view>

				<view class="info-item">
					<text class="label">预存运费</text>
					<text class="value">44,000.00 元</text>
				</view>

				<view class="info-item">
					<text class="label">货源开始时间</text>
					<text class="value">2022-03-30 12:00</text>
				</view>
			</view>
		</view>
		<view class="dibu">
			<view class="footer-text">返回首页</view>
			<view class="footer-text" style="margin-bottom: 40rpx;">查看货源</view>
		</view>
		<!-- 底部按钮 -->

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	
	
	
</script>

<style lang="scss">
	/* 全局样式 */
	page {
		background-color: #002fa7;
	}

	.container {
		display: flex;
		flex-direction: column;
		min-height: 90vh;
		padding: 0;
	}

	/* 主要内容区域 */


	/* 信息卡片样式 - 蓝色背景填满左右 */
	.info-card {
		background-color: #002fa7;
		padding: 40rpx 30rpx;
		margin: 0;
		width: 100%;
		box-sizing: border-box;

	}

	.success-icon {
		width: 150rpx;
		height: 150rpx;
		display: block;
		margin: 0 auto 30rpx;
	}

	.success-message {
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		margin-bottom: 50rpx;
	}

	/* 信息列表样式 */
	.info-list {
		padding: 0 20rpx;
	}

	.info-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding: 25rpx 0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		width: 30%;
	}

	.value {
		font-size: 28rpx;
		color: #ffffff;
		width: 70%;
		text-align: right;
		word-break: break-word;
	}

	.dibu {
		background-color: #ffffff;
		border-radius: 25rpx 25rpx 0 0;
	}

	.footer-text {
		width: 75%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 32rpx;
		padding: 20rpx 60rpx;
		border-radius: 10rpx;
		color: #ffffff;
		background-color: #002fa7;
		text-align: center;
		margin-left: 35rpx;
		margin-top: 30rpx;
	}
</style>